<template>
  <div class="flex flexColumn flex1">
    <div class="title">
      <span>首页 &gt; 商品管理 &gt; 商品分类 </span>
    </div>

    <div class="main flex flexColumn">
      <div class="main-title flex">
        <span>商品分类</span>
        <el-button type="goon" @click="addCateFn">添加分类</el-button>
      </div>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column label="分类" width="200">
          <template slot-scope="scope">
            <div v-show="!scope.row.flag">{{ scope.row.cateName }}</div>
            <el-input
              v-model="scope.row.cateName"
              v-show="scope.row.flag"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="是否启用" width="200">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#706c61"
              inactive-color="#e1f4f3"
              :disabled="!scope.row.flag"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="light"
              @click="scope.row.flag = true"
              v-show="!scope.row.flag"
              >编辑</el-button
            >
            <el-button
              @click="handleEdit(scope.row)"
              v-show="scope.row.flag"
              type="danger"
              size="mini"
              >完成</el-button
            >
            <el-button
              size="mini"
              type="goon"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="proclass-page">
        <el-pagination
          @current-change="pageFn"
          @size-change="changeSize"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="添加分类"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="flex" style="padding-bottom: 10px">
        <span style="width: 100px">分类名称</span
        ><el-input v-model="addCate"></el-input>
      </div>
      <el-switch
        v-model="addState"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="light">取 消</el-button>
        <el-button type="goon" @click="confirmAddCateFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addcate, catelist, delcate, editcate } from "@/apis/items.js";

export default {
  data() {
    return {
      list: [],
      addCate: "",
      addState: true,
      currentPage: 1,
      pageSize: 5,
      total: 0,
      newAcc: "",
      newGroup: "",
      multipleSelection: [],
      dialogVisible: false,
    };
  },
  created() {
    this.reCatelist();
  },
  methods: {
    addCateFn() {
      this.dialogVisible = true;
      this.reCatelist();
    },
    confirmAddCateFn() {
      addcate({ cateName: this.addCate, state: this.addState }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.dialogVisible = false;
        }
      });
    },
    reCatelist() {
      catelist({ currentPage: this.currentPage, pageSize: this.pageSize }).then(
        (res) => {
          for (let obj of res.data.data) {
            obj.state = obj.state == 1;
            obj.flag = false;
          }

          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    pageFn(page) {
      this.currentPage = page;
      this.reCatelist();
    },
    changeSize(size) {
      this.pageSize = size;
      this.reCatelist();
    },
    handleEdit(obj) {
      editcate({ id: obj.id, cateName: obj.cateName, state: obj.state }).then(
        (res) => {
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "优选管理系统提示:" + obj.cateName + "添加成功!",
            });
            obj.flag = false;
          }
        }
      );
    },
    handleDelete(id) {
      this.$confirm("此操作将永久该账户, 是否继续?", "优选系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delcate({ id: id }).then((res) => {
            if (res.data.code == 0) {
              console.log(res);
              this.reCatelist();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.main .main-title {
  justify-content: space-between;
}
.proclass-page {
  margin-top: 40px;
}
.el-button--goon {
  color: #fff;
  background-color: #706c61;
  border-color: #706c61;
}
.el-button--light {
  color: #706c61;
  background-color: #e1f4f3;
  border-color: #e1f4f3;
}
</style>